<template>
	<div class="app-container">
		<div class="bgWhite radius8">
			<el-form class="pl20 pr20 pt30 pb12 flex col-top row-between" label-width="100px" :model="queryParams"
				ref="queryRef" :inline="true">
				<div>
					<el-form-item label="关键词" prop="keyWords">
						<el-input v-model="queryParams.keyWords" placeholder="不限" clearable class="resetInput"
							style="width: 200px" :suffix-icon="Search" @keyup.enter="handleQuery" />
					</el-form-item>
					<el-form-item label="客户类型" prop="customerType">
						<el-select v-model="queryParams.customerType" placeholder="客户类型" size="large"
							style="width: 200px">
							<el-option v-for="dict in bus_customer_type" :key="dict.value" :label="dict.label"
								:value="dict.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="客户星级" prop="customerStarLevel">
						<el-select v-model="queryParams.customerStarLevel" placeholder="客户星级" size="large"
							style="width: 200px">
							<el-option v-for="dict in bus_customer_starlevel" :key="dict.value" :label="dict.label"
								:value="dict.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="最后跟进时间" prop="time">
						<!-- <el-date-picker @change="changeTime" v-model="queryParams.time" value-format="YYYY-MM-DD"
							type="daterange" range-separator="至" start-placeholder="请选择开始时间" end-placeholder="请选择结束时间"
							size="large" style="width: 310px;" /> -->
						<datePickerRange ref="clearPicker" @dateRangeValue="changeTime"></datePickerRange>	
					</el-form-item>
				</div>
				<div class="flex col-center row-end" style="width: 516px;margin-right: 0;">
					<el-button class="searchBtn" type="defaultBtn" @click="handleQuery">查询</el-button>
					<el-button class="searchBtn" icon="Refresh" @click="resetQuery">重置</el-button>
				</div>
			</el-form>
		</div>

		<div class="bgWhite radius8 p20 mt25">
			<div class="mb20">
				<span class="fb fs16">客户列表</span>
			</div>
			<el-table v-loading="loading" :data="list" style="width: 100%;"
				:header-row-style="{background:'#FAFAFA',color:'#0C1019',height:'54px'}" :cell-style="{height:'54px'}"
				@selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55" align="center" />
				<el-table-column label="客户姓名" align="center">
					<template #default="scope">
						<span class="main-color">{{scope.row.customerName}}</span>
					</template>
				</el-table-column>
				<el-table-column label="客户状态" align="center" prop="customerStatus">
					<template v-slot="scope">
						<div class="flex col-center row-center" :class="activeStatus(scope.row.customerStatus)">
							<span class="drop"></span>
							<dict-tag :options="bus_customer_status" :value="scope.row.customerStatus" />
						</div>
					</template>
				</el-table-column>
				<el-table-column label="客户星级" align="center" prop="customerStarLevel">
					<template #default="scope">
						<el-rate v-model="scope.row.customerStarLevel" value="3" disabled text-color="#ff9900" />
					</template>
				</el-table-column>
				<el-table-column label="客户来源" align="center" prop="opportunitySource">
					<template v-slot="scope">
						<dict-tag :options="bus_channel" :value="scope.row.opportunitySource" />
					</template>
				</el-table-column>
				<el-table-column label="手机号码" align="center" prop="phoneNumber" :show-overflow-tooltip="true" />
				<el-table-column label="最后跟进" align="center" prop="latestFollowupTime" :show-overflow-tooltip="true" />
				<el-table-column label="前业务经理" align="center" prop="businessManagerName"
					:show-overflow-tooltip="true" />
				<el-table-column fixed="right" label="操作" align="center" width="300px"
					class-name="small-padding fixed-width">
					<template #default="scope">
						<el-button link class="linkBtnColor" type="primary" 
						v-hasPermi="['customer:invalidTransferCustomer']"
							@click="handleCustomer(scope.row)">转移客户</el-button>
					</template>
				</el-table-column>
			</el-table>
			<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
				v-model:limit="queryParams.pageSize" />
		</div>
		<!-- 转移客户 -->
		<el-dialog v-model="dialogFormVisible" width="460" title="转移客户" center :align-center="true"
			custom-class="radius8">
			<el-form :model="form" ref="formRef" :rules="rules" label-width="95px">
				<el-form-item label="业务经理：" prop="businessManagerId">
					<el-select v-model="form.businessManagerId" filterable size="large" placeholder="请选择"
						style="width: 318px">
						<el-option v-for="dict in businessList" :key="dict.userId" :label="dict.userName"
							:value="dict.userId" />
					</el-select>
				</el-form-item>
				<el-form-item label="备注信息：" prop="remark">
					<div class="radius8" style="padding:5px;background-color:#F7F8FA ;">
						<el-input v-model="form.remark" style="width: 308px;box-shadow: none;" :rows="6" type="textarea"
							placeholder="请输入备注信息" resize="none"
							:input-style="{background:'#F7F8FA',borderRaduis:'5px',boxShadow:'none'}" />
					</div>
					<div class="color-red fs14">*如需变更客户相关记录业务经理员请勾选相关选项</div>
				</el-form-item>
			</el-form>
			<template #footer>
				<div class="dialog-footer text-right" style="padding-top: 0;">
					<el-button plain @click="dialogFormVisible = false">取消</el-button>
					<el-button type="defaultBtn" @click="submitForm">确定</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>
<script setup name="Invalid">
	const {
		proxy
	} = getCurrentInstance();
	const {
		bus_customer_status,
		bus_channel,
		bus_customer_type,
		bus_customer_starlevel
	} = proxy.useDict("bus_customer_status", "bus_channel", "bus_customer_type", "bus_customer_starlevel");
</script>
<script>
	import {
		resetForm,
		getUserInfo
	} from '@/utils/ruoyi'
	import {
		invalidList,
		listData,
		invalidTransferCustomer
	} from "@/api/business/customer";
	import {
		ref
	} from 'vue'
	import {
		Search
	} from '@element-plus/icons-vue'
	export default {
		data() {
			return {
				dialogFormVisible: false,
				ids: '', //要转的数据
				businessList: [], //业务经理数组
				form: {
					businessManagerId: '',
					remark: ''
				},
				rules: {
					businessManagerId: [{
						required: true,
						message: '请选择业务经理',
						trigger: 'blur'
					}, ]
				},
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					customerType: '', //客户类型
					customerStarLevel: '', //客户星级
					time: '',
					startTime: '',
					endTime: '',
					keyWords: ''
				},
				total: 0,
				loading: true,
				list: [],
			}
		},
		created() {
			this.getList();
		},
		methods: {
			// 请求列表数据
			getList() {
				this.loading = true;
				invalidList(this.queryParams).then(response => {
					this.list = response.rows;
					this.total = response.total;
					this.loading = false;
				});
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
				// ids.value = selection.map(item => item.jobId);
				// single.value = selection.length != 1;
				// multiple.value = !selection.length;
			},
			// 搜索按钮操作
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			// 重置按钮操作
			resetQuery() {
				this.$refs.clearPicker.clearPickerValue()
				this.queryParams.startTime = ''
				this.queryParams.endTime = ''
				this.resetForm("queryRef");
				this.handleQuery();
			},
			//时间
			changeTime(e) {
				this.queryParams.startTime = e[0]
				this.queryParams.endTime = e[1]
				// this.getList();
			},
			// 转移客户按钮
			handleCustomer(row) {
				console.log(row, 'row')
				this.dialogFormVisible = true
				this.ids = row.id
				let deptId = this.getUserInfo().deptId
				listData({
					deptId: deptId
				}).then(response => {
					this.businessList = response.data
				});
			},
			// 转移客户提交
			submitForm() {
				let data = {
					ids: this.ids,
					businessManagerId: this.form.businessManagerId,
					remark: this.remark
				}
				this.$refs["formRef"].validate(valid => {
					if (valid) {
						invalidTransferCustomer(data).then(response => {
							this.dialogFormVisible = false
							this.$modal.msgSuccess("转移成功");
							this.getList();
						})
					}
				})

			}
		}
	}
</script>
<style>
	.el-checkbox {
		margin-bottom: 0 !important;
	}
</style>